<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--    <script th:src="@{/static/main.js}"></script>-->
<!--    不能用这个main.js-->

    <style>
        .cover {
            display: inline-block;
            width: 30px;
            height: 30px;
            position: absolute;
            right: 13px;
            top: 122px;
            z-index: 100;
            cursor: pointer;
        }
        .form-control:hover {
            background-color: honeydew;
        }
    </style>
</head>
<body>
<!--颜醉-->
<!--用户个人信息页-->


<div class="container-fluid" id="app" style="margin-top: 10px;margin-bottom: 100px">

    <div class="container" style="margin-top: 10px">

        <div class="row">
            <div class="col-md-12">
                <p style="background-color: cornflowerblue ; color: white; font-size: 30px; padding-left: 10px; border-radius: 4px">
                    <a th:href="@{/usercenter.html}" style="font-size: 30px;color: white;text-decoration: none">个人中心</a>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12 col-md-12">
                <div class="thumbnail col-md-4 col-md-offset-4"
                     style="border: 1px solid #cccccc ;border-radius: 5px;box-shadow: 5px 5px 3px 0px #CCCCCC;margin-top: 40px">
                    <form action="/user/update" method="post" target="sypost" enctype="multipart/form-data">
                        <p style="color: red" id="errorInfo" th:text="${errorInfo}">errorInfo</p>
                        <p style="color: red" id="newName" th:text="${newName}">newName</p>
                        <div class="form-group">
                            <label for="account">用户名</label>
                            <input type="text" name="username" class="form-control" id="account"
                                   :placeholder="currentUser.username">
                        </div>
                        <div class="form-group">
                            <label for="password">密码</label>
                            <input :type="flagType" name="password" class="form-control fc-clear" id="password"
                                   :placeholder="currentUser.password">
                            <span class="cover input-icon input-icon-md" @click.prevent="getFlag()"
                                  style="display: inline">
                                    <span :class="isOpen" style="color: rgba(141,134,139,0.71);"></span>
                                </span>
                        </div>
                        <div class="form-group">
                            <label for="tel">电话</label>
                            <input type="text" name="tel" class="form-control" id="tel" :placeholder="currentUser.tel">
                        </div>
                        <div class="form-group">
                            <label for="email">邮箱</label>
                            <input type="email" name="email" class="form-control" id="email"
                                   :placeholder="currentUser.email">
                        </div>

                        <div class="form-group">
                            <label for="inputSource">头像</label>
                            <input id="inputSource" type="file" name="source"/>
                        </div>

                        <input type="hidden" name="id" :value="currentUser.id">

                        <button type="submit" class="btn btn-success" style="margin-left: 280px;margin-bottom: 10px">保存</button>
                    </form>
                </div>


            </div>
        </div>

    </div>

</div>

<script>

    console.log(".........usersetting...........")

    let usersetting = new Vue({
        el: "#app"
        ,
        data: {
            currentUser: '',
            flag: false,
            flagType: 'password',
            isOpen: 'glyphicon glyphicon-eye-open'
        }
        ,
        methods: {
            initCurrentUser() {
                let _this = this;
                $.get("/user/currentUser", function (data) {
                    _this.currentUser = data;
                })
            }
            ,
            toFresh() {
                let _this = this;
                console.log($("#errorInfo").text());

                if ($("#errorInfo").text() == 'ok') {
                    alert("保存成功,正在返回主页");
                    location.href="/reLogFrame";

                }else if ($("#errorInfo").text() == 'toReLog') {
                    let username = $("#newName").text();
                    $.post("/user/reLog", {username: username},function (){

                    })
                    alert("保存成功,正在返回主页");
                    location.href="/reLogFrame";
                }
            }
            ,
            //小眼睛切换状态
            getFlag() {
                this.flag = !this.flag;
                this.flagType = this.flag ? 'text' : 'password';//text为显示密码；password为隐藏密码

                let addClass = ' input-icon input-icon-md style:"display: inline"';

                this.isOpen = this.flag ? 'glyphicon glyphicon-eye-close' : 'glyphicon glyphicon-eye-open' //close为闭眼；open为睁眼

            }
        }
        ,
        created() {
            this.initCurrentUser();
            this.toFresh();
        }

    });


</script>

</body>
</html>

